<!DOCTYPE html>
<html lang="">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>连线题</title>
	<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
	<!-- ********************************************************** -->
	<div class="line-container">
		<canvas width="600" height="500" class="line-canvas"></canvas>	
		<div class="line-option line-option-left" data-num="1" data-right="">动物</div>
		<div class="line-option line-option-left" data-num="2" data-right="">交通工具</div>
		<div class="line-option line-option-left" data-num="3" data-right="">蔬菜</div>
		<div class="line-option line-option-right" data-num="1">公交车</div>
		<div class="line-option line-option-right" data-num="2">猫</div>
		<div class="line-option line-option-right" data-num="3">西红柿</div>
		<button class="line-reset">重连</button>
		<button class="line-goback">后退</button>	
	</div>	
	<!-- ********************************************************** -->
	<button class="result">查看结果</button>
	<script src="./script/jquery.min.js"></script>
	<script src="./script/line.js"></script>
	<script>
		$(function () {

			$('.line-option-left').each(function (i) {
				var $this = $(this);
				$this.css('top', 100 * (i + 1))
			});

			$('.line-option-right').each(function (i) {
				var $this = $(this);
				$this.css('top', 100 * (i + 1))
			});

			$('.line-container').line();

			$('.result').on('click', function (e) {
				$('.line-option-left').each(function () {
					var $this = $(this);
					alert('左：' + $this.data('num') + '\n' + '右：' + $this.data('right'));
				});
			});

		});
	</script>
</body>
</html>
